<template>
  <view class="container">
    <!-- 个人信息展示区 -->
    <view class="profile-card">
      <image :src="userInfo.avatar" class="avatar" mode="scaleToFill"></image>
      <view class="profile-info">
        <text class="nickname">{{ userInfo.nickname }}</text>
        <text class="bio">{{ userInfo.bio }}</text>
        <view class="social-links">
          <navigator v-for="(link, idx) in userInfo.social" :key="idx" :url="link.url" class="social-item">
            <image :src="link.icon" class="social-icon"></image>
            <text>{{ link.name }}</text>
          </navigator>
        </view>
      </view>
    </view>

    <!-- 博客统计卡片 -->
    <view class="stats-grid">
      <view class="stats-card" v-for="(stat, idx) in blogStats" :key="idx">
        <image :src="stat.icon" class="stats-icon"></image>
        <text class="stats-value">{{ stat.value }}</text>
        <text class="stats-label">{{ stat.label }}</text>
      </view>
    </view>

    <!-- 文章分类与标签 -->
    <view class="section-card">
      <text class="section-title">分类与标签</text>
      <view class="tags-container">
        <text v-for="(tag, idx) in articleTags" :key="idx" class="tag-item">#{{ tag }}</text>
      </view>
    </view>

    <!-- 热门文章 -->
    <view class="section-card">
      <text class="section-title">热门文章</text>
      <view class="article-list">
        <view class="article-item" v-for="(article, idx) in hotArticles" :key="idx">
          <navigator :url="`/pages/article/detail?id=${article.id}`" class="article-link">
            <text class="article-title">{{ article.title }}</text>
            <text class="article-meta">阅读量: {{ article.views }} · 点赞数: {{ article.likes }}</text>
            <text class="article-summary">{{ article.summary }}</text>
          </navigator>
        </view>
      </view>
    </view>

    <!-- 我的收藏 -->
    <view class="section-card">
      <text class="section-title">我的收藏</text>
      <view class="article-list">
        <view class="article-item" v-for="(collect, idx) in myCollections" :key="idx">
          <navigator :url="`/pages/article/detail?id=${collect.id}`" class="article-link">
            <text class="article-title">{{ collect.title }}</text>
            <text class="article-meta">来源: {{ collect.source }}</text>
            <text class="article-summary">{{ collect.summary }}</text>
          </navigator>
        </view>
      </view>
    </view>

    <!-- 账号设置入口 -->
    <navigator url="/pages/account/settings" class="settings-btn">账号设置 ></navigator>
  </view>
</template>

<script>
import { getBlogStats, getHotArticles, getMyCollections } from '../../api/blog.js'

export default {
  data() {
    return {
      userInfo: {
        avatar: '/static/my-blog/user.png',
        nickname: '默认昵称',
        bio: '暂无个人简介',
        social: [
          { name: '微博', icon: '/static/my-blog/xinlang.png', url: '' },
          { name: '知乎', icon: '/static/my-blog/zhihu.png', url: '' }
        ]
      },
      blogStats: [
        { label: '文章总数', value: 0, icon: '/static/my-blog/Article.png' },
        { label: '总阅读量', value: 0, icon: '/static/my-blog/view.png' },
        { label: '总点赞数', value: 0, icon: '/static/my-blog/likes.png' },
        { label: '粉丝数', value: 0, icon: '/static/my-blog/fans.png' }
      ],
      articleTags: [],
      hotArticles: [],
      myCollections: []
    }
  },
  onLoad() {
    this.loadBlogData()
  },
  methods: {
    async loadBlogData() {
      // 加载博客统计数据
      const stats = await getBlogStats()
      this.blogStats = this.blogStats.map((item, idx) => ({ ...item, value: stats[idx] }))

      // 加载热门文章
      this.hotArticles = await getHotArticles()

      // 加载我的收藏
      this.myCollections = await getMyCollections()

      // 加载文章标签（示例数据）
      this.articleTags = ['技术', '生活', '旅行', '前端', '阅读']
    }
  },
  watch: {
    // 监听用户信息变化实时更新
    userInfo: {
      handler(newVal) {
        // 调用更新接口保存用户信息
        console.log('用户信息更新:', newVal)
      },
      deep: true
    }
  }
}
</script>

<style scoped>
.container {
  padding: 30rpx;
  background-color: #fff;
}

.profile-card {
  display: flex;
  align-items: center;
  padding: 40rpx;
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.08);
  margin-bottom: 40rpx;
}
.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  margin-right: 40rpx;
}
.nickname {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 16rpx;
}
.bio {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 24rpx;
}
.social-links {
  display: flex;
  gap: 30rpx;
}
.social-item {
  display: flex;
  align-items: center;
  gap: 10rpx;
  font-size: 24rpx;
  color: #409eff;
}
.social-icon {
  width: 36rpx;
  height: 36rpx;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30rpx;
  margin-bottom: 40rpx;
}
.stats-card {
  padding: 30rpx;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  text-align: center;
}
.stats-icon {
  width: 48rpx;
  height: 48rpx;
  margin-bottom: 16rpx;
}
.stats-value {
  font-size: 36rpx;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 8rpx;
}
.stats-label {
  font-size: 24rpx;
  color: #666;
}

.section-card {
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  padding: 30rpx;
  margin-bottom: 40rpx;
}
.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 24rpx;
  padding-bottom: 16rpx;
  border-bottom: 2rpx solid #f0f0f0;
}
.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}
.tag-item {
  padding: 12rpx 24rpx;
  background: #f5f7fa;
  border-radius: 20rpx;
  font-size: 24rpx;
  color: #666;
}
.tag-item:hover {
  background: #e6f1ff;
  color: #409eff;
}

.article-list {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}
.article-item {
  padding-bottom: 30rpx;
  border-bottom: 2rpx solid #f0f0f0;
}
.article-title {
  font-size: 30rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 12rpx;
}
.article-meta {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 12rpx;
}
.article-summary {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
}

.settings-btn {
  display: block;
  width: 100%;
  padding: 24rpx;
  background: #409eff;
  color: #fff;
  font-size: 30rpx;
  text-align: center;
  border-radius: 16rpx;
}
</style>